<template>
    <div class="contain">
        <div class="tip">
            <!-- 订单信息框 -->
            <div>_____________________________________________</div>
            <div class="tip_01">
                <div style="color: #0f294d;font-size: 24px">
                    订住时间：
                </div>
                <!-- 订住时间 -->
                <div class="tip_02">
                    <div class="block">
                        <el-date-picker style="width: 800px;" v-model="timevalue" type="daterange"
                            start-placeholder="入住时间" size="large" end-placeholder="退房时间"
                            :default-value="[new Date(2024, 3, 1), new Date(2024, 4, 1)]" />
                    </div>
                </div>
            </div>

            <div>_____________________________________________</div>
            <!--入住信息  -->
            <div style="color: #0f294d; font-size: 24px; font-weight: 700;margin-bottom: 10px;">
                入住信息：
            </div>
            <el-card style="max-width: 1360px;">
                <div style="display: flex;">
                    <div style="padding-left: 100px;">
                        <el-descriptions class="margin-top" :column="3"
                            style="color: #8592a6;width: 800px;font-size: 16px;font-weight: 700;">
                            <el-descriptions-item label="姓名:">
                                {{ user_data.username }}
                            </el-descriptions-item>
                            <el-descriptions-item label="电话:">{{ user_data.userphone }}</el-descriptions-item>
                            <el-descriptions-item label="身份证号:">{{ user_data.userId }}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div style="width: 200px;">
                        <el-button type="primary" @click="updata" style="margin-left: 300px;">信息修改</el-button>
                    </div>
                </div>
            </el-card>
            <div>_____________________________________________</div>
            <!-- 酒店房间信息 -->
            <div class="tip_01" style="color: #0f294d; font-size: 24px;">
                酒店房间信息:
                <div style="display: flex;">
                    <!-- 左边 -->
                    <div style="width: 600px;height: auto;">
                        <div class="home_type" style="height: auto;display: flex;">
                            <!-- 酒店信息展示 -->
                            <div>
                                <img v-lazy:="`http://101.42.51.171:9000/smart/image/${hotaldata.hotal.img}`" alt=""
                                    style="width: 200px;height: 200px;">
                            </div>

                            <div style="display: block;">
                                <div style="font-size: 20px;font-weight: 400;display: flex;margin: 10px;">
                                    <div style="margin-right: 20px;"> {{ hotaldata.hotal.name }}</div>
                                    <div>
                                        <img v-lazy:="`http://101.42.51.171:9000/smart/image/star${hotaldata.hotal.star}.png`"
                                            alt="">
                                    </div>
                                </div>
                                <div
                                    style="font-size: 20px;font-weight: 400;display: flex;margin: 10px;margin-top: 50px;">
                                    <div> 现有房型：</div>
                                    <div style="margin-left: 10px;">
                                        <div style="margin: 5px;font-size: 14px;font-weight: 400;">大床房</div>
                                        <div style="margin: 5px;font-size: 14px;font-weight: 400;">双床房</div>
                                        <div style="margin: 5px;font-size: 14px;font-weight: 400;">单床房</div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!-- 右边 -->
                    <div style="display: block;width: 650px;padding: 50px;margin-left: 100px;">
                        <!-- 上面 -->
                        <div style="display: flex;padding-bottom: 10px;border-bottom: 1px solid black;">
                            <!-- 左边 -->
                            <div style="display: block;">
                                <!-- 第一个 -->
                                <div style="display: flex;width: 400px;">

                                    <div
                                        style="display: flex;background-color: #4978ce;padding: 3px 8px;border-radius: 2px;font-size: 22px;line-height: 22px;color: hsla(0, 0%, 100%, .6);font-weight: 700;cursor: pointer;white-space: nowrap;">
                                        <div style="color: #fff;font-size: 20px; margin-right: 2px;">{{
                                            hotaldata.hotal.score }}</div>
                                        <div>分</div>
                                    </div>

                                    <div
                                        style="widows: 40px;height: 24px;color: #4978ce; font-size: 20px; margin-left: 8px; font-weight: 700; ">
                                        {{ hotaldata.hotal.grade }}
                                    </div>

                                </div>
                                <!-- 第二个 -->
                                <div
                                    style="margin-bottom: 4px;margin-top: 5px;font-size: 14px;color: #287dfa;font-weight: 700;cursor: pointer;white-space: nowrap;">
                                    该酒店有234条点评</div>
                                <div
                                    style="margin-bottom: 4px;font-size: 14px;color:#06aebd;font-weight: 400;white-space: nowrap;">
                                    环境优雅、适合带娃</div>
                            </div>
                            <!-- 右边 -->
                            <div class="text">
                                房间干净卫生，手机控制房内设备，很方便，服务周到热情。 考虑再去一次.
                            </div>
                        </div>
                        <!-- 下面 -->
                        <div style="margin: 10px;">
                            <el-tag style="margin: 5px;" class="ml-2" type="danger" effect="plain"
                                v-for="(k, index) in hotaldata.hotal.tag" :key="index">
                                {{ k }}
                            </el-tag>
                        </div>

                    </div>
                </div>

            </div>

            <!-- 酒店房间展示 -->
            <div class="hoteldata" style="display: block;background-color: #FFF;margin-top: 20px;">
                <!-- 大床房 -->
                <div style="display: flex;margin-bottom: 10px;">
                    <div class="home_left"
                        style="border-right:1px solid black; width: 200px;height: 100%;padding: 10px;padding-right: 50px;">

                        <img v-lazy:="`http://101.42.51.171:9000/smart/image/home_03.png`" alt=""
                            style="width: 100px; height: 100px;">
                        <div style="font-weight: 600;font-size: 14px;line-height: 18px;">
                            花园大床房
                        </div>
                        <div style="font-size: 12px;font-weight: 200;">
                            1张1.8米大床 | 20m² | 飘窗 | 禁烟
                        </div>

                    </div>
                    <div class="home_right" style="margin-top: 30px; margin-left: 300px;">
                        <el-tooltip content="订单确认后30分钟内免费取消。逾期不可取消，若未入住将收取您全额费用（如用优惠券则以券后支付价为准）。
                                订单需等酒店或供应商确认后生效，订单确认结果以途路短信、邮件或app通知为准，如订单不确认将全额退款至您的付款账户。" placement="bottom"
                            effect="light">
                            <span style="font-size: 14px;border-bottom: 1px dashed black;">30分钟内可免费去取消</span>
                        </el-tooltip>
                        <div style="display: flex;">
                            <el-tooltip content="预订此房型后可快速确认订单。" placement="bottom" effect="light">
                                <span
                                    style="font-size: 14px;border-bottom: 1px dashed #06aebd;color: #06aebd;padding-top: 18px;">立即确定</span>
                            </el-tooltip>

                            <div
                                style="line-height: 28px;color: #0086f6;font-size: 24px;font-weight: 600;margin-left: 550px;">
                                <h3>￥{{ hotaldata.hotal.homeInfo[1].homePrice }}元</h3>
                            </div>

                            <div>
                                <el-button plain class="button_01" @click="del_order(0)">立即预订</el-button>

                            </div>
                        </div>

                        <div
                            style="color: #ee3b28;font-size: 14px;font-weight: 400;margin-left: 738px;margin-top: 10px;">
                            仅剩{{ hotaldata.hotal.homeInfo[1].homeNumber }}间房
                        </div>
                    </div>
                </div>
            </div>

            <!-- 双床房 -->
            <div style="display: block;background-color: #FFF;margin-top: 20px;">
                <div style="display: flex;margin-bottom: 10px;">
                    <div class="home_left"
                        style="border-right:1px solid black; width: 200px;height: 100%;padding: 10px;padding-right: 50px;">

                        <img v-lazy:="`http://101.42.51.171:9000/smart/image/home_02.png`" alt=""
                            style="width: 100px; height: 100px;">
                        <div style="font-weight: 600;font-size: 14px;line-height: 18px;">
                            花园双床房
                        </div>
                        <div style="font-size: 12px;font-weight: 200;">
                            2张1.5米双人床 | 40m² | 飘窗 | 禁烟
                        </div>

                    </div>
                    <div class="home_right" style="margin-top: 30px; margin-left: 300px;">
                        <el-tooltip content="订单确认后30分钟内免费取消。逾期不可取消，若未入住将收取您全额费用（如用优惠券则以券后支付价为准）。
                                订单需等酒店或供应商确认后生效，订单确认结果以途路短信、邮件或app通知为准，如订单不确认将全额退款至您的付款账户。" placement="bottom"
                            effect="light">
                            <span style="font-size: 14px;border-bottom: 1px dashed black;">30分钟内可免费去取消</span>
                        </el-tooltip>
                        <div style="display: flex;">
                            <el-tooltip content="预订此房型后可快速确认订单。" placement="bottom" effect="light">
                                <span
                                    style="font-size: 14px;border-bottom: 1px dashed #06aebd;color: #06aebd;padding-top: 18px;">立即确定</span>
                            </el-tooltip>

                            <div
                                style="line-height: 28px;color: #0086f6;font-size: 24px;font-weight: 600;margin-left: 550px;">
                                <h3>￥{{ hotaldata.hotal.homeInfo[0].homePrice }}元</h3>
                            </div>

                            <div>
                                <el-button plain class="button_01" @click="del_order(1)">立即预订</el-button>

                            </div>
                        </div>

                        <div
                            style="color: #ee3b28;font-size: 14px;font-weight: 400;margin-left: 738px;margin-top: 10px;">
                            仅剩{{ hotaldata.hotal.homeInfo[0].homeNumber }}间房
                        </div>
                    </div>
                </div>
            </div>

            <!-- 单床房 -->
            <div style="display: block;background-color: #FFF;margin-top: 20px;">
                <div style="display: flex;margin-bottom: 10px;">
                    <div class="home_left"
                        style="border-right:1px solid black; width: 200px;height: 100%;padding: 10px;padding-right: 50px;">

                        <img v-lazy:="`http://101.42.51.171:9000/smart/image/home_01.jpg`" alt=""
                            style="width: 100px; height: 100px;">
                        <div style="font-weight: 600;font-size: 14px;line-height: 18px;">
                            花园单床房
                        </div>
                        <div style="font-size: 12px;font-weight: 200;">
                            1张1.5米单人床 | 40m² | 飘窗 | 禁烟
                        </div>

                    </div>
                    <div class="home_right" style="margin-top: 30px; margin-left: 300px;">
                        <el-tooltip content="订单确认后30分钟内免费取消。逾期不可取消，若未入住将收取您全额费用（如用优惠券则以券后支付价为准）。
                                订单需等酒店或供应商确认后生效，订单确认结果以途路短信、邮件或app通知为准，如订单不确认将全额退款至您的付款账户。" placement="bottom"
                            effect="light">
                            <span style="font-size: 14px;border-bottom: 1px dashed black;">30分钟内可免费去取消</span>
                        </el-tooltip>
                        <div style="display: flex;">
                            <el-tooltip content="预订此房型后可快速确认订单。" placement="bottom" effect="light">
                                <span
                                    style="font-size: 14px;border-bottom: 1px dashed #06aebd;color: #06aebd;padding-top: 18px;">立即确定</span>
                            </el-tooltip>

                            <div
                                style="line-height: 28px;color: #0086f6;font-size: 24px;font-weight: 600;margin-left: 550px;">
                                <h3>￥{{ hotaldata.hotal.homeInfo[2].homePrice }}元</h3>
                            </div>

                            <div>
                                <el-button plain class="button_01" @click="del_order(2)">立即预订</el-button>

                            </div>
                        </div>

                        <div
                            style="color: #ee3b28;font-size: 14px;font-weight: 400;margin-left: 738px;margin-top: 10px;">
                            仅剩{{ hotaldata.hotal.homeInfo[2].homeNumber }}间房
                        </div>
                    </div>
                </div>
            </div>

            <!-- 酒店入住政策 -->
            <div
                style="margin-top: 10px;color: #0f294d; font-size: 24px;font-weight: 700;background-color: #FFF;padding: 20px;">
                酒店政策
                <div style="display: block;margin-top: 20px;">

                    <!-- 订房必读 -->
                    <div
                        style="display: flex;border-bottom: 1px solid #dadfe6; margin-bottom: 40px;padding-bottom: 40px;">

                        <div
                            style="width: 198px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                            订房必读</div>

                        <div style="display: block;margin-left: 200px;">
                            <div style="padding-bottom: 20px;border-bottom:1px dashed #e5e5e5 ;">
                                <div
                                    style="width: 198px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                                    • 特殊入离时间</div>
                                <div
                                    style="font-weight: 400; font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 22px;">
                                    入住时间：15:00以后，退房时间：07:00~12:00，请注意您的抵店和退房时间</div>
                            </div>
                            <div style="padding-top: 20px;">
                                <div
                                    style="width: 198px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                                    • 城市通知</div>
                                <div
                                    style="font-weight: 400; font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 22px;">
                                    为贯彻落实《上海市生活垃圾管理条例》相关规定，推进生活垃圾源头减量，上海市文化和旅游局特制定《关于本市旅游住宿业不主动提供客房一次性日用品的实施意见》，2019年7月1日起，上海市旅游住宿业将不再主动提供牙刷、梳子、浴擦、剃须刀、指甲锉、鞋擦这些一次性日用品。若需要可咨询酒店。
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- 入离时间 -->
                    <div
                        style="display: flex;border-bottom: 1px solid #dadfe6; margin-bottom: 40px;padding-bottom: 40px;">

                        <div
                            style="width: 198px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                            入离时间</div>

                        <div
                            style="display: flex; margin-left: 100px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                            <div>入住时间： 15:00后</div>
                            <div style="margin-left: 100px;">退房时间： 07:00至12:00</div>
                        </div>

                    </div>

                    <!-- 儿童及加床 -->
                    <div
                        style="display: flex;border-bottom: 1px solid #dadfe6; margin-bottom: 40px;padding-bottom: 40px;">

                        <div
                            style="width: 198px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                            儿童及加床</div>

                        <div
                            style="display: block;margin-left: 100px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 400">
                            <div style="margin-top: 10px;">欢迎携带儿童入住</div>
                            <div
                                style="margin-top: 20px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                                婴儿床及加床政策</div>
                            <div style="margin-top: 10px;">所有房型不可加床、不提供婴儿床</div>
                            <div style="margin-top: 10px;">
                                <table
                                    style="text-align: center; width: 510px; border-spacing: 0;border-collapse: separate; font-size: 14px; border: 1px solid black;border-radius: 5px;line-height: 50px;">
                                    <tr
                                        style=" background-color: #eef1f6;border-top-left-radius: 6px;border-top-right-radius: 6px;font-weight: 700;">
                                        <td style="border-top-left-radius: 6px;">年龄</td>
                                        <td style="border-top-left-radius: 6px;">床铺</td>
                                        <td style="border-top-left-radius: 6px;">费用</td>
                                    </tr>
                                    <tr>
                                        <td style="border-top-left-radius: 6px;">6岁及以下</td>
                                        <td style="border-top-left-radius: 6px;">使用现有床铺</td>
                                        <td style="border-top-left-radius: 6px;">
                                            <span style="color: #08a66f;">免费</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div
                                style="margin-top: 20px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                                儿童早餐</div>
                            <div style="margin-top: 10px;">
                                <table
                                    style="text-align: center; width: 510px; border-spacing: 0;border-collapse: separate; font-size: 14px; border: 1px solid black;border-radius: 5px;line-height: 50px;">
                                    <tr
                                        style=" background-color: #eef1f6;border-top-left-radius: 6px;border-top-right-radius: 6px;font-weight: 700;">
                                        <td>年龄</td>
                                        <td>费用</td>
                                    </tr>
                                    <tr>
                                        <td>6岁及以下</td>
                                        <td style="border-top-left-radius: 6px;">
                                            <span style="color: #08a66f;">免费</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                    </div>

                    <!-- 接待提示 -->
                    <div
                        style="display: flex;border-bottom: 1px solid #dadfe6; margin-bottom: 40px;padding-bottom: 40px;">

                        <div
                            style="width: 198px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                            接待提示</div>

                        <div
                            style="display: block; margin-left: 100px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                            <div style="margin-bottom: 40px;">
                                <div style="margin-bottom: 10px;">年龄限制</div>
                                <div
                                    style="font-weight: 400;;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;">
                                    入住办理人需年满18岁</div>
                            </div>

                            <div>
                                <div style="margin-bottom: 10px;">可接待人群</div>
                                <div
                                    style=" font-weight: 400;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;">
                                    接待来自任何国家/地区的客人</div>
                            </div>

                        </div>

                    </div>

                    <!-- 入住提示 -->
                    <div
                        style="display: flex;border-bottom: 1px solid #dadfe6; margin-bottom: 40px;padding-bottom: 40px;">
                        <div
                            style="width: 198px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                            入住提示</div>
                        <div style="margin-left: 100px;">
                            <div
                                style=" width: 198px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700;margin-bottom: 10px;">
                                前台服务</div>
                            <div
                                style="font-weight: 400;;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;">
                                前台营业时间：24小时营业</div>
                        </div>
                    </div>

                    <!-- 宠物 -->
                    <div
                        style="display: flex;border-bottom: 1px solid #dadfe6; margin-bottom: 40px;padding-bottom: 40px;">
                        <div
                            style="width: 198px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                            宠物</div>
                        <div
                            style="margin-left: 100px;font-weight: 400;;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;">
                            不可携带宠物</div>
                    </div>

                    <!-- 早餐 -->
                    <div
                        style="display: flex;border-bottom: 1px solid #dadfe6; margin-bottom: 40px;padding-bottom: 40px;">
                        <div
                            style="width: 198px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                            早餐
                        </div>
                        <div
                            style="margin-left: 100px;font-weight: 400;;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;">
                            <div>餐食类型：中式</div>
                            <div>餐食形式：固定套餐，¥48每份</div>
                            <div>营业时间：每天07:30-09:30开放</div>
                        </div>
                    </div>

                    <!-- 预订提示 -->
                    <div
                        style="display: flex;border-bottom: 1px solid #dadfe6; margin-bottom: 40px;padding-bottom: 40px;">
                        <div
                            style="width: 198px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                            预订提示
                        </div>
                        <div
                            style="margin-left: 100px;font-weight: 400;;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;">
                            订单需等酒店或供应商确认后生效，订单确认结果以平台短信、邮件或app通知为准。
                        </div>
                    </div>

                    <!-- 支付方式 -->
                    <div
                        style="display: flex;border-bottom: 1px solid #dadfe6; margin-bottom: 40px;padding-bottom: 40px;">
                        <div
                            style="width: 198px;font-size: 14px;color: #0f294d;letter-spacing: 0;line-height: 18px;font-weight: 700">
                            支付方式
                        </div>
                        <div style="margin-left: 100px;display: flex;">
                            <div style="width: 50px;height: 30px;margin: 10px;"><img
                                    v-lazy="`http://101.42.51.171:9000/smart/image/pay_01.png`"></div>
                            <div style="width: 50px;height: 30px;margin: 10px;"><img
                                    v-lazy="`http://101.42.51.171:9000/smart/image/pay_02.png`"></div>
                            <div style="width: 50px;height: 30px;margin: 10px;"><img
                                    v-lazy="`http://101.42.51.171:9000/smart/image/pay_03.png`"></div>
                            <div style="width: 50px;height: 30px;margin: 10px;"><img
                                    v-lazy="`http://101.42.51.171:9000/smart/image/pay_04.png`"></div>
                            <div style="width: 50px;height: 30px;margin: 10px;"><img
                                    v-lazy="`http://101.42.51.171:9000/smart/image/pay_05.png`"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 切换入住人 -->
        <el-dialog v-model="showDialog" width="600px" height="500px" center>
            <div class="textWrapper">
                <span class="title">请输入修改信息</span>
                <div class="text item_01">
                    <div>
                        <div><span>姓 名：</span></div>
                        <el-input v-model="user_data.username" style="width: 240px" placeholder="例如：李四" />
                    </div>
                    <div>
                        <div><span>身份证：</span></div>
                        <el-input v-model="user_data.userId" style="width: 240px" placeholder="请输入大陆身份证号" />
                    </div>
                    <div>
                        <div><span>联系电话：</span></div>
                        <el-input v-model="user_data.userphone" style="width: 240px" placeholder="请确保能联系到您" />
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="confirm(0)">取消</el-button>
                    <el-button type="primary" @click="confirm(1)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue';
import Link from "../api/Link.js";
import apiurl from "../api/url.js";
import { useRouter } from 'vue-router';
const router = useRouter()

//pinia本地化存储用户信息
import { Hotaldata } from "../store/Hotaldata.js";
import { storeToRefs } from "pinia";
const hotaldata = Hotaldata();

import { useUserStore } from "../store/UserStore.js";
const UserStore = useUserStore();

//入住时间
const timevalue = ref(null)


//房间类型
const radioHome = ref(null)

//住户信息
let user_data = ref(
    {
        username: UserStore.username,
        userphone: UserStore.userphone,
        userId: UserStore.userId,
    }
)
//获取订单id
let orderId = ref()
//消息框的确定订单按钮
const del_order = async (radioHome: any) => {
    if (timevalue.value == null || radioHome == null) {
        ElMessage({
            showClose: true,
            message: '请完善入住信息',
            type: 'error',
        })
        const message = document.querySelector('.el-message__content')?.parentNode
        //判断提示框的数量   
        if (document.getElementsByClassName('el-message__content').length > 1) {
            setTimeout(function () {
                message.parentNode.removeChild(message);
            }, 100)
        }
    } else {
        //酒店订单信息
        let hotal_order = {
            userId: UserStore.id,
            rider: UserStore.username,
            riderNumberId: UserStore.userId,
            riderPhone: UserStore.userphone,
            ticketId: hotaldata.hotal.id,
            payPrice: hotaldata.hotal.homeInfo[radioHome].homePrice,
            payState: 0,
            seatNum: hotaldata.hotal.homeInfo[radioHome].homeId,
            type: 5,
            trainNumber: null,
            checkInTime: timevalue.value[0],
            checkOutTime: timevalue.value[1],
            startPlace: hotaldata.hotal.name,
            endPlace: null,
            payTime: null,
            orderState: "待支付",
        }
        console.log(hotal_order);
        //发送请求创建酒店订单
        await Link(apiurl.add, "POST", hotal_order)
            .then((ok: any) => {
                console.log("生成的订单", ok)
                orderId.value = ok
                console.log("存储的id", orderId.value);

                ElMessage({
                    showClose: true,
                    message: '订单生成成功，正在跳转支付页面...',
                    type: 'success',
                })
                const message = document.querySelector('.el-message__content')?.parentNode
                //判断提示框的数量   
                if (document.getElementsByClassName('el-message__content').length > 1) {
                    setTimeout(function () {
                        message.parentNode.removeChild(message);
                    }, 100)
                }
            })
        // 订单生成成功后，跳转支付页面
        router.push({
            path: '/pay',
            query: {
                id: orderId.value,
                time: 500
            }
        })
    }
}
const to_main = () => {
    router.push({
        path: '/main'
    })
}

//修改信息功能
const updata = () => {
    showDialog.value = true
}

//控制修改框的弹出
const showDialog = ref(false)
const confirm = (k: number) => {
    if (k == 1) {
        showDialog.value = false
    } else {
        showDialog.value = false
    }
}
</script>

<style lang='scss' scoped>
.text {
    float: right;
    margin-left: -100px;
    width: 100%;
    word-break: break-all;
    line-height: 18px;
    font-size: 14px;
    color: #455873;
    letter-spacing: 0;
    font-family: PingFangSC-Regular;
    background-color: #f5f9ff;
    padding: 10px;
}

.home_type {
    height: 250px;
    padding: 20px;
    margin: 5px;
}

.el-radio-group {
    display: block;
    justify-content: center;
    align-items: center;

    >div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #d1dbe5;
        margin-bottom: 20px;
        padding-left: 10px;

        >div {
            width: 120px;
            height: 50px;
            text-align: center;
            padding-top: 10px;

            >h6 {
                height: 50px;
                font-size: 20px;
                font-weight: 400;
            }
        }
    }
}

.title {
    font-size: 20px;
    font-weight: 900;
    padding-left: 200px;
}

.textWrapper {
    max-height: 500px;
    overflow-y: auto;
}

.el-date-editor.el-input__wrapper {
    box-shadow: none;
    width: 600px;
}

.block {
    width: 800px;
    margin-left: 300px;
    border-radius: 15px;
    background-color: whitesmoke;
}

.contain {
    background-color: #f5f7fa;
}

.tip {
    margin: 10px;
    margin-left: 50px;
    margin-right: 50px;
    padding: 10px;
    display: block;
    border: 1px soild black;
}

.el-dialog__title {
    font-size: 25px;
    padding-left: 300px;
    font-weight: 900;

}

.tip_01 {
    display: block;
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--el-text-color-primary);
    border-top: 1px soild black;
    background-color: #fff;

    p {
        font-size: 16px;
        color: black;
        font-weight: 200;
    }
}


.tip_02 {
    text-align: center;
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.margin-top {
    margin-bottom: 0px;
}

.button_01 {
    color: #fff;
    font-size: 16px;
    background-color: #ff9500;
    text-align: center;
    height: 38px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    font-weight: 700;
    margin-left: 20px;
    box-sizing: border-box;
    min-width: 75px;
}

#el-label {
    color: var(--el-text-color-primary);
    margin-right: 16px;
    font-size: 20px;
    font-weight: 700;
}
</style>